<template>
  <div>
<!--  form表单  -->
    <el-form class="my-form" :inline="true" :model="searchData">
      <el-form-item label="所属线路">
        <el-select v-model="searchData.map.circuity" placeholder="请选择 " clearable>
          <el-option v-for="item in cirInfo" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="searchData.map.state" placeholder="请选择" clearable>
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="sub" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button class="addBtn" type="success" icon="el-icon-plus" @click="showAddPole()">添加塔杆</el-button>
<!--  数据表格  -->
    <el-table
        size="mini"
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="塔杆编号"
          width="200">
      </el-table-column>
      <el-table-column
          prop="cname"
          label="所属线路">
      </el-table-column>
      <el-table-column
          label="状态（启用/停用）"
          width="200">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state===0" size="small" type="danger">停用</el-tag>
          <el-tag v-if="scope.row.state===1" size="small" type="success">启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state===0" type="text" size="small" @click="changPoleState(scope.row,1)">启用</el-button>
          <el-button v-if="scope.row.state===1"  type="text" size="small" @click="changPoleState(scope.row,0)">停用</el-button>
          <el-button  type="text" size="small" @click="showUpdatePole(scope.row)">修改</el-button>
          <el-popconfirm
              title="确定删除吗？"
              @confirm="delPole(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">&nbsp;&nbsp;&nbsp;删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!--  分页组件  -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchData.current"
        :page-sizes="searchData.pageSizes"
        :page-size="searchData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchData.total">
    </el-pagination>
<!--  添加弹出层  -->
    <el-dialog
        title="添加塔杆"
        :visible.sync="addHandle"
        width="50%">
      <el-form label-width="80px" :model="addPoleInfo" :rules="rules" ref="poleInfo">
        <el-form-item label="塔杆编号" prop="id">
          <el-input v-model="addPoleInfo.id"></el-input>
        </el-form-item>
        <el-form-item label="塔杆状态" prop="state">
          <el-radio-group v-model="addPoleInfo.state">
            <el-radio :label="1" border>启用</el-radio>
            <el-radio :label="0" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="塔杆经度" prop="lng">
          <el-input v-model="addPoleInfo.lng"></el-input>
        </el-form-item>
        <el-form-item label="塔杆纬度" prop="lat">
          <el-input v-model="addPoleInfo.lat"></el-input>
        </el-form-item>
        <el-form-item>
          <my-map @getMapInfo="getMapInfo"></my-map>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addHandle = false">取 消</el-button>
    <el-button type="primary" @click="addPole('poleInfo')">确 定</el-button>
  </span>
    </el-dialog>
<!--  修改功能弹出层  -->
    <el-dialog
        title="修改塔杆"
        :visible.sync="updateVisible"
        width="50%"
        >
      <el-form :model="updateInfo" ref="updateForm" :rules="updateRules">
        <el-form-item label="塔杆编号">
          <el-input disabled v-model="updateInfo.id" placeholder="塔杆编号"></el-input>
        </el-form-item>
        <el-form-item label="塔杆经度" prop="lng">
          <el-input v-model="updateInfo.lng"></el-input>
        </el-form-item>
        <el-form-item label="塔杆纬度" prop="lat">
          <el-input v-model="updateInfo.lat"></el-input>
        </el-form-item>
        <el-form-item>
          <my-map :mylat="updateInfo.lat" :mylng="updateInfo.lng" @getMapInfo="updateMapInfo"></my-map>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="updateVisible = false">取 消</el-button>
    <el-button type="primary" @click="subUpdate('updateForm')">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import MyMap from "@/views/sys/MyMap";
export default {
  name: "Tggl",
  components:{
    MyMap

  },
  data(){
    return{
      updateVisible:false,
      updateInfo:{
        id:'',
        lng:'',
        lat:''
      },
      updateRules:{
        lng:[{required: true, message: '请输入内容', trigger: 'blur'}],
        lat:[{required: true, message: '请输入内容', trigger: 'blur'}],
      },
      rules:{
        id:[{required: true, message: '请输入内容', trigger: 'blur'}],
        state:[{required: true, message: '请输入内容', trigger: 'blur'}],
        lng:[{required: true, message: '请输入内容', trigger: 'blur'}],
        lat:[{required: true, message: '请输入内容', trigger: 'blur'}],
      },
      addPoleInfo:{
        id:'',
        lng:'',
        lat:'',
        state:''
      },
      addHandle:false,
      cirInfo:'',
      tableData: '',
      searchData:{
        pageSizes:[5,8],
        current:1,
        size:5,
        total:10,
        map:{
          circuity:'',
          state:''
        }
      }
    }
  },
  methods:{
    getMapInfo(res){
      this.addPoleInfo.lng=res[0]
      this.addPoleInfo.lat=res[1]
    },
    updateMapInfo(res){
      this.updateInfo.lng=res[0]
      this.updateInfo.lat=res[1]
    },
    sub(){
      this.searchData.current=1;
      this.getPoleInfo();
    },
    /*获取下拉列表的数据*/
    getAllCir(){
      this.$axios.get('/nb/pole/getAllCir').then(res=>{
        this.cirInfo=res.data.data;
      });
    },
    /*获得表格信息*/
    getPoleInfo(){
      this.$axios.post('/nb/pole/list/'+this.searchData.current+'/'+this.searchData.size,this.searchData.map).then(res=>{
        console.log(res.data.data);
        this.tableData=res.data.data.records;
        this.searchData.total=res.data.data.total;
      });
    },
    /*页面改变*/
    handleCurrentChange(res){
      this.searchData.current=res;
      this.getPoleInfo();
    },
    /*尺寸改变*/
    handleSizeChange(res){
      this.searchData.size=res;
      this.getPoleInfo();
    },
    /*修改塔杆状态*/
    changPoleState(row,flag){
      row.state=flag;
      this.$axios.post('/nb/pole/update/pole',row).then(res=>{
        if (res.data.data){
          this.$message.success("修改成功！");
        }
      })
    },
    /*删除塔杆*/
    delPole(row){
      this.$axios.post('/nb/pole/del/pole/'+row.id).then(res=>{
        if (res.data.data){
          this.$message.success("删除成功！")
        }
      })
    },
    addPole(formName){
      this.$refs[formName].validate((valid) => {
        if (valid){
          this.$axios.post('/nb/pole/add/pole',this.addPoleInfo).then(res=>{
            if (res.data.data){
              this.$message({
                showClose: true,
                message: '恭喜你，操作成功',
                type: 'success',
                onClose:() => {
                  this.addHandle=false
                }
              });
            }
          })
        }
      })
    },
    showAddPole(){
      this.addHandle=true
    },
    showUpdatePole(row){
      this.updateVisible=true
      this.updateInfo=row;
    },
    subUpdate(formName){
      this.$refs[formName].validate((valid) => {
        this.$axios.post('/nb/pole/update/pole',this.updateInfo).then(res=>{
          if (res.data.data){
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success',
              onClose:() => {
                this.addHandle=false
              }
            });
          }
        });
      })
    }
  },
  created() {
    this.getAllCir();
    this.getPoleInfo();
  }
}
</script>

<style scoped>
.my-form{
  display: flex;
  float: left;
}
.addBtn{
  display: flex;
  float: right;
}
</style>